<template>
  <div class="wrap">
    <div class="center">
      <div class="title">
        <img :src="userInfo.avatar" :onerror="defaultImg" class="avi" alt />
        <p>{{userInfo.username}}</p>
      </div>
      <img :src="userInfo.qr_code" class="code" alt />
      <span>扫描图中二维码关注我</span>
      <div class="fl" @click="save">
        <span>保存二维码</span>
        <img class="ll" src="../assets/save.png" alt />
      </div>
    </div>
    <div class="wrap2" id="can">
      <img src="../assets/bg.png" class="bg" alt srcset />
      <img :src="userInfo.qr_code" class="code" alt srcset />
      <img :src="userInfo.avatar" :onerror="defaultImg" class="header" alt />
      <img src="../assets/wxicon.png" class="wxicon" alt srcset />
      <p class="name">{{userInfo.username}}</p>
      <p class="wxts">扫码查看你在此商家的订单</p>
    </div>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" style="margin-top:30px" @click.stop>
        <img :src="base64" style="width:60%" alt srcset />
      </div>
    </van-overlay>
    <div id="box"></div>
  </div>
</template>
<style lang="scss" scoped>
.wrap2 {
  position: absolute;
  left: -10000px;
  .bg {
    width: 375px;
    display: block;
  }
  .wxicon {
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    bottom: 150px;
    left: 80px;
  }
  .wxts {
    position: absolute;
    bottom: 157px;
    left: 120px;
    font-size: 14px;
    font-variant: normal;
  }
  .code {
    position: absolute;
    top: 400px;
    left: 77px;
    width: 220px;
  }

  .header {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 342px;
    left: 70px;
  }

  .name {
    position: absolute;
    top: 358px;
    left: 133px;
    width: 148px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    font-variant: normal;
    text-align: left;
    font-size: 16px;
  }
}
.wrap {
  height: 100vh;
  background: #fcf9fc;
  padding-top: 40px;
  background-size: cover;
  overflow: hidden;
}
.center {
  width: 9.173333rem;
  height: 12.8rem;
  background: #fff;
  border-radius: 0.266667rem;
  margin: 0 auto;
  overflow: hidden;
  .title {
    display: flex;
    align-items: center;
    width: 8rem;
    margin: 1.04rem auto 0;
    .avi {
      width: 1.173333rem;
      height: 1.173333rem;
      border-radius: 50%;
      display: block;
    }
    p {
      color: #555;
      font-size: 0.453333rem;
      margin-left: 0.266667rem;
      text-align: left;
    }
  }
  .code {
    width: 8rem;
    height: 8rem;
    display: block;
    margin: 0.4rem auto;
    border-radius: 0.266667rem;
  }
  span {
    color: #999;
    font-size: 0.32rem;
    display: block;
    text-align: left;
    width: 8rem;
    margin: 0 auto;
  }
  .fl {
    border-top: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    width: 8rem;
    margin: 10px auto;
    padding-top: 10px;
    .ll {
      display: 0.4rem;
      height: 0.4rem;
      display: block;
      margin-left: 15px;
    }
    > span {
      margin: 0;
    }
  }
}
</style>
<script>
import { findUserInfo } from "@/utils/interface";
import html2canvas from "html2canvas";

export default {
  data() {
    return {
      userInfo: {},
      defaultImg: 'this.src="' + require("../assets/user3.jpg") + '"',
      base64: "",
      show: false
    };
  },
  methods: {
    findUserInfo() {
      findUserInfo().then(res => {
        this.userInfo = res.data.data;
      });
    },
    save() {
      let that = this;
      html2canvas(document.getElementById("can"), { useCORS: true }).then(
        function(canvas) {
          that.base64 = canvas.toDataURL("png");
          // document.getElementById('box').append(canvas)
          that.show = true;
          console.log(imgData);
        }
      );
    }
  },
  created() {
    document.title = "我的二维码";
    this.findUserInfo();
  }
};
</script>

